<template>
  <div class="MonitoringType">
    <TitleColumn name="监测类型统计" />
    <div class="content">
      <vue3ScrollSeamless
        class="warnScrollWrap"
        :classOptions="{ step: 0.3 }"
        :dataList="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]"
      >
        <ul>
          <li v-for="(item, index) in 12" :key="'colunm' + index">
            <h3>
              <img src="./images/icon.png" alt="" />
              {{ item }}月
            </h3>

            <div class="itemContent">
              <div class="itemList">
                <div class="line">
                  <img src="./images/line.png" alt="" />
                </div>
                <div class="text">
                  水位预警 :
                  <span>
                    <CountTo
                      :startVal="1"
                      :endVal="33"
                      :decimals="0"
                      :duration="1000"
                    /> </span
                  >个
                </div>
              </div>

              <div class="itemList">
                <div class="line">
                  <img src="./images/line.png" alt="" />
                </div>
                <div class="text">
                  雨量告警 :
                  <span>
                    <CountTo
                      :startVal="1"
                      :endVal="12"
                      :decimals="0"
                      :duration="1000"
                    /> </span
                  >个
                </div>
              </div>

              <div class="itemList">
                <div class="line">
                  <img src="./images/line.png" alt="" />
                </div>
                <div class="text">
                  闸门告警 :
                  <span>
                    <CountTo
                      :startVal="1"
                      :endVal="56"
                      :decimals="0"
                      :duration="1000"
                    /> </span
                  >个
                </div>
              </div>

              <div class="itemList">
                <div class="line">
                  <img src="./images/line.png" alt="" />
                </div>
                <div class="text">
                  视频告警 :
                  <span>
                    <CountTo
                      :startVal="1"
                      :endVal="6"
                      :decimals="0"
                      :duration="1000"
                    /> </span
                  >个
                </div>
              </div>
            </div>
          </li>
        </ul>
      </vue3ScrollSeamless>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from "vue";
import TitleColumn from "@/components/TitleColumn";
import { CountTo } from "@gui-pkg/components";
import { vue3ScrollSeamless } from "vue3-scroll-seamless";

const state = reactive({});
onMounted(() => {});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.MonitoringType {
  width: 100%;
  .content {
    width: 100%;
    height: calc(100% - 24px);
    background: #02123433;
    backdrop-filter: blur(10px);
    overflow: hidden;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    ul {
      height: 100%;
      padding: 10px;
      li {
        width: 100%;
        h3 {
          width: 160px;
          height: 24px;
          background: url(./images/title_bg.png) no-repeat;
          background-size: 100% 100%;
          font-family: 江城斜黑体;
          font-size: 12px;
          font-style: italic;
          font-weight: 900;
          color: #fff;
          display: flex;
          align-items: center;
          padding-left: 10px;

          img {
            width: 18px;
            margin-right: 6px;
          }
        }

        .itemContent {
          display: flex;
          justify-content: space-between;
          .itemList {
            width: 23%;
            height: 78px;
            background: url(./images/item_bg.png) no-repeat;
            background-size: 100% 100%;
            .line {
              margin-top: 10px;
              text-align: center;
              img {
                height: 34px;
              }
            }
            .text {
              text-align: center;
              margin-top: 4px;
              font-family: Source Han Sans CN;
              font-size: 12px;
              font-weight: 400;
              color: #b4dfff;
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                font-family: DIN Alternate;
                font-size: 16px;
                font-weight: 700;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
